<template>
	<view class="li">
		<view class="li-text">
			<image class="li-text__img" :src="item.icon"></image>
			<view class="li-text__value">
				<view class="title">
					<view>{{ item.title }}</view>
					<view class="s">
						<image class="li-text__img" src="@/static/images/integral/succ.png"></image>
						<text>+{{ item.score + item.extraScore }}积分</text>
					</view>
				</view>
				<view class="value">
					{{ item.remark }}
				</view>
			</view>
		</view>
		<view class="li-btn active" v-if="item.hasSign == 1">{{
			item.btnDisbleStr || '已完成'
		}}</view>
		<view class="li-btn" v-if="item.hasSign == 0" @tap="addTask(item)">{{
			item.btnEnableStr || '去完成'
		}}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},

	mounted() {},

	methods: {
		addTask(e) {
			if (e.url === '/pages/index/index') {
				this.$Router.pushTab(e.url);
			} else if (e.url === '/pages/integral/index') {
				uni.switchTab({
					url: '/pages/integral/index'
				});
			} else {
				this.$Router.push(e.url);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.li {
	@include flexBox(space-between, center);
	.li-text {
		@include flexBox(null, center);
		&__img {
			width: 72rpx;
			height: 72rpx;
		}
		&__value {
			margin-left: 16rpx;
			.title {
				@include flexBox(null, center);
				color: #383042;
				font-size: 28rpx;
				.s {
					background: #fffcce;
					font-size: 22rpx;
					color: #efb414;
					@include flexBox(center, center);
					margin-left: 16rpx;
					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.value {
				color: #717076;
				font-size: 24rpx;
				@include ellipsis(2);
			}
		}
	}
	.li-btn {
		width: 146rpx;
		height: 64rpx;
		border: 2px solid #f70114;
		border-radius: 34rpx;
		color: #f70114;
		font-size: 28rpx;
		@include flexBox(center, center);

		&.active {
			background: #f3f3f5;
			border: none;
			color: #87838d;
		}
	}
}
</style>
